import React from 'react';
import {Icon,IconItem} from "./MyIcon.style"

const MyIcon=(props)=>{
    const {icons}=props
    console.log(icons,'icons');
    return(
        <>
        <Icon>
            {icons.map((item,index)=>{
                console.log(item,'item');
                return(
                    <IconItem key={index}>
                        <div className="icon">
                            <svg t="1646634596863" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6528" width="200" height="200"><path d="M800.362059 639.125329c-10.467399 0-18.940374 8.469905-19.016099 18.939351l0 0.038886c0 0 0 0.038886 0 0.079818 0 0 0 0 0 0.038886l0 96.378048c0 21.017686-17.019629 38.038338-38.034245 38.038338L379.591853 792.638655c-0.01842 0-0.01842 0-0.036839 0L212.86969 792.638655c-20.99722 0-38.034245-17.020652-38.034245-38.038338L174.835446 264.310781c0-21.016663 17.037025-38.033221 38.034245-38.033221l530.441001 0c21.014616 0 38.036291 17.016559 38.036291 38.033221l0 102.026698c0 0.038886 0 0.076748 0 0.076748 0 10.510378 8.505721 19.019169 19.016099 19.019169s19.017122-8.509814 19.017122-19.019169c0 0 0-0.037862 0-0.076748l0-105.830327c0-39.916105-32.349779-72.26486-72.26486-72.26486L209.065038 188.242292c-39.915082 0-72.26486 32.348756-72.26486 72.26486l0 497.896794c0 39.917128 32.348756 72.266907 72.26486 72.266907l538.050306 0c39.915082 0 72.26486-32.349779 72.26486-72.266907l0-100.340289C819.340295 647.595234 810.830481 639.125329 800.362059 639.125329z" p-id="6529" fill="#f98080"></path><path d="M814.163389 412.369885l-277.060153 0c-37.448914 0-67.855434 28.54615-71.550593 65.010643-0.420579 0.666172-0.724501 1.607614-0.733711 3.294023l0 60.188824c0 39.915082 32.346709 72.26486 72.285327 72.26486l277.060153 0c39.916105 0 72.26793-32.349779 72.26793-72.26486l0-50.699706 0-0.038886 0-5.487991C886.43132 444.719664 854.079494 412.369885 814.163389 412.369885zM848.394005 537.062815c0 21.014616-17.055444 38.030152-38.032198 38.030152L567.098387 575.092967c-0.038886 0-0.038886 0-0.038886 0l-26.15366 0c-21.024849 0-38.046524-17.015535-38.046524-38.030152l0-48.623417c0-20.979824 17.021675-38.035268 38.046524-38.035268l269.455965 0c20.977777 0 38.032198 17.056468 38.032198 38.035268L848.394005 537.062815z" p-id="6530" fill="#f98080"></path><path d="M788.639063 489.143433c-12.821003 0-23.212678 10.392698-23.212678 23.212678 0 12.784164 10.390651 23.175839 23.212678 23.175839s23.212678-10.391674 23.212678-23.175839C811.850717 499.536131 801.460066 489.143433 788.639063 489.143433z" p-id="6531" fill="#f98080"></path></svg>
                        </div>
                        <div className="icon-name">{item.name}</div>
                    </IconItem>
                )
            })}
        </Icon>
        </>
    )
}
export default MyIcon